<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>组员禅道统计</title>
    <link rel="stylesheet" href="js/layui/css/layui.css" />
    <style>
      .past_area {
        width: 1200px;
        margin: 20px auto;
      }

      .past_area textarea {
        width: 100%;
        box-sizing: border-box;
        padding: 10px;
        color: #666;
      }

      .tool-bar {
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      #table {
        width: 1200px;
        margin: 10px auto;
      }

      .flex {
        display: flex;
      }

      .box {
        width: 1200px;
        margin: 50px auto;
      }

      #result {
        flex: 1;
      }

      #result_num {
        text-align: center;
        min-width: 100px;
      }
      .list-item {
        padding: 20px 0;
      }
      .list-item:nth-of-type(odd) {
        background-color: #f5f5f5;
      }
      .text-wrap .item {
        margin-bottom: 10px;
      }
      .tool {
        padding: 10px 0;
      }
    </style>
  </head>

  <body>
    <div class="past_area">
      <p>
        组员由他完成禅道表格dom结构粘贴到下方 从tbody开始
        <!-- 组员由他完成禅道表格dom结构粘贴到下方 从tbody开始（默认自动获取剪切板） -->
      </p>
      <div class="text-wrap">
        <div class="item">
          <div class="tool">
            <span class="add layui-btn layui-btn-normal">添加一行</span>
          </div>
          <textarea
            name=""
            placeholder="组员由他完成禅道表格dom结构粘贴到下方 从tbody开始"
            cols="30"
            rows="10"
          ></textarea>
        </div>
      </div>
    </div>
    <div class="tool-bar">
      <div class="layui-btn layui-btn-normal" id="btn">生成</div>
    </div>
    <div class="box">
      <h2>结果列表</h2>
      <div class="flex">
        <div id="result" style="border: 1px solid #333; padding: 0 10px"></div>
      </div>
    </div>
    <table id="table" style="display: none"></table>
    <script src="./js/jquery-1.8.3.min.js"></script>
    <script src="js/layer/layer.js"></script>
    <script src="js/layui/layui.js"></script>
    <script>
      // 添加一行按钮点击
      $('body').on('click', '.text-wrap .tool .add', function () {
        let list = `<div class="item">
          <div class="tool">
            <span class="add layui-btn layui-btn-normal">添加一行</span
            ><span class="del layui-btn layui-btn-danger">删除</span>
          </div>
          <textarea name="" placeholder="组员由他完成禅道表格dom结构粘贴到下方 从tbody开始" cols="30" rows="10"></textarea>
        </div>`
        $('.text-wrap').append(list)
      })
      // 删除一行按钮点击
      $('body').on('click', '.text-wrap .tool .del', function () {
        $(this).parents('.item').remove()
      })
      // 生成按钮点击
      $('#btn').click(function () {
        //加载层-风格2
        layer.load(1)
        //此处演示关闭
        setTimeout(function () {
          layer.closeAll('loading')
          calc()
        }, 1000)
      })

      //获取剪切板
      // navigator.clipboard
      //   .readText()
      //   .then((v) => {
      //     // console.log("获取剪贴板成功：", v);
      //     $('#text_area').val(v)
      //   })
      //   .catch((v) => {
      //     console.log('获取剪贴板失败: ', v)
      //   })

      //中文首字符的升序排列
      function compare(property) {
        return function (a, b) {
          var value1 = a[property]
          var value2 = b[property]
          // return value1 - value2
          return value1.localeCompare(value2, 'zh-Hans-CN')
        }
      }

      // 计算组员统计
      function calc() {
        let table_dom = ''
        $('textarea').each(function () {
          let text = $(this).val()
          table_dom += text
        })
        // return false

        if (table_dom) {
          let arr = []
          let list = ''
          $('#table').html(table_dom)
          $('#table tr').each(function (i, e) {
            let name = $(e).find('td').eq(2).find('a').text()
            let ctx = $(e).find('td').eq(3).find('a').text()
            let id = $(e)
              .find('td')
              .eq(0)
              .find('a')
              .text()
              .replace(/[\ \r\n]/g, '')
            arr.push({
              name: name,
              ctx: ctx.replace(/完成/g, ''),
              id,
            })
          })
          arr.sort(compare('name'))
          arr.forEach((e, i) => {
            let tmp_text = ''
            if (i > 0 && e.name == arr[i - 1].name) {
              tmp_text = `<p>${e.ctx}</p>`
            } else {
              tmp_text = `<br/><p>${e.name}</p><p>${e.ctx}</p>`
            }
            list += tmp_text
          })
          $('#result').html(list)
        }
      }
    </script>
  </body>
</html>
